@use '../../assets/customVar.scss' as *;
@mixin moreSytle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  forced-color-adjust: none;
  .left {
    flex: 1;
    font-size: 0.9375rem;
    .left-data {
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      .changeData {
        display: flex;
        flex-direction: column;
      }
    }
  }
  .right {
    width: 20px;
    height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: $bg-default-color;
    border-radius: 10px;
    overflow: hidden;
    .right-level {
      width: 20px;
      // 修改这个位置以便实现降雨量的显示
      height: 50%;
      // 渐变
    }
  }
}
// 替换下雨时的内容
.rain {
  @include moreSytle;
  .right {
    .right-level {
      background: linear-gradient(rgb(26, 67, 240) 0%, rgb(110, 132, 254) 100%);
    }
  }
}

// 风速样式
.wind {
  @include moreSytle;
  .right {
    .right-level {
      background: linear-gradient(rgb(98, 171, 245) 0%, rgb(150, 198, 246) 100%);
    }
  }
}
// 湿度样式
.humidity {
  @include moreSytle;

  .right {
    .right-level {
      background: linear-gradient(rgb(24, 169, 201) 0%, rgb(24, 201, 201) 100%);
    }
  }
}
// 云量样式
.cloud {
  @include moreSytle;

  .right {
    .right-level {
      background: linear-gradient(rgb(24, 169, 201) 0%, rgb(24, 201, 201) 100%);
    }
  }
}
// 气压样式
.pressure {
  @include moreSytle;

  .right {
    .right-level {
      background: linear-gradient(rgb(138, 123, 255) 0%, rgba(154, 152, 255, 0.8) 100%);
    }
  }
}

// 选中时的样式
.main
  .tabsCarouselItems
  .tabsContainer
  .tabsCarousel
  .tabsCarouselItems-DS.active
  .tabDailyItem-DS
  .tabDailyButton
  .tabContent
  .rain
  .right {
  border: 1px solid rgba(#f0f0f0, 0.5);
}
